<template>
  <basic-container :btnFlag=true>
    <div class="grid">
      <span @click="activeId=1"
            :class="activeId===1?'actived':'unactived'">
        <el-badge :value="scheduleTotal | notZero"
                  class="item">
          待办规划
        </el-badge>
      </span>
      <span @click="activeId=2"
            :class="activeId===2?'actived':'unactived'">
        <el-badge :value="checkTotal | notZero"
                  class="item">
          待办清单
        </el-badge>
      </span>
      <span @click="activeId=3"
            :class="activeId===3?'actived':'unactived'">
        <el-badge :value="discussionTotal | notZero"
                  class="item">
          会商反馈
        </el-badge>
      </span>
      <span @click="activeId=4"
            :class="activeId===4?'actived':'unactived'">
        <el-badge :value="reviewTotal | notZero"
                  class="item">
          审核审批
        </el-badge>
      </span>
      <span @click="activeId=5"
            :class="activeId===5?'actived':'unactived'">
        <el-badge :value="opinionTotal | notZero"
                  class="item">
          意见反馈
        </el-badge>
      </span>
      <span @click="activeId=6"
            :class="activeId===6?'actived':'unactived'">
        <el-badge :value="subjectTotal | notZero"
                  class="item">
          课题征集
        </el-badge>
      </span>
      <span @click="activeId=7"
            :class="activeId===7?'actived':'unactived'">
        <el-badge :value="collectionTotal | notZero"
                  class="item">
          材料收集
        </el-badge>
      </span>
      <span @click="activeId=8"
            :class="activeId===8?'actived':'unactived'">
        <el-badge :value="connectionTotal | notZero"
                  class="item">
          规划衔接
        </el-badge>
      </span>
    </div>


    <div class="flex-start-div">
      <div class="flex-start">
         <span @click="activeId=9"
               :class="activeId===9?'actived':'unactived'">
          <el-badge :value="endSubjectTotal | notZero"
                    class="item">
          结题申请
          </el-badge>
      </span>
        <span @click="activeId=10"
              :class="activeId===10?'actived':'unactived'">
      <el-badge :value="workitemTotal | notZero"
                class="item">
      进度上报
      </el-badge>
      </span>
        <span @click="activeId=11"
              :class="activeId===11?'actived':'unactived'">
      <el-badge :value="reportTotal | notZero"
                class="item">
      监测评估
      </el-badge>
      </span>
        <span @click="activeId=12"
              :class="activeId===12?'actived':'unactived'">
      <el-badge :value="adjustTotal | notZero"
                class="item">
      修订调整
      </el-badge>
      </span>
      </div>
      <div style="width: 50%">

      </div>
    </div>
    <schedule @getTotal="getScheduleTotal"
              v-show="activeId===1"></schedule>
    <check @getTotal="getCheckTotal"
           v-show="activeId===2"></check>
    <discussion @getTotal="getDiscussionTotal"
                v-show="activeId===3"></discussion>

    <todo-review @getTotal="getReviewTotal"
                 v-show="activeId===4"></todo-review>

    <todo-opinion @getTotal="getOpinionTotal"
                  v-show="activeId===5"></todo-opinion>

    <todo-subject @getTotal="getSubjectTotal"
                  v-show="activeId===6"></todo-subject>

    <todo-collection @getTotal="getCollectionTotal"
                     v-show="activeId===7"></todo-collection>

    <todo-connection @getTotal="getConnectionTotal"
                     v-show="activeId===8"></todo-connection>

    <todo-endsubject @getTotal="getEndSubjectTotal"
                     v-show="activeId===9"></todo-endsubject>

    <todo-workitem @getTotal="getWorkitemTotal"
                   v-show="activeId===10"></todo-workitem>

    <todo-report @getTotal="getReportTotal"
                 v-show="activeId===11"></todo-report>

    <todo-adjust @getTotal="getAdjustTotal"
                 v-show="activeId===12"></todo-adjust>
  </basic-container>
</template>
<script>
import schedule from '@/views/planning/project/schedule'
import check from '@/views/planning/detailedList/check'
import discussion from '@/views/planning/project/discussion'
import todoReview from '@/views/review/toDoReview'
import todoOpinion from '@/views/opinion/toDoOpinion'
import todoSubject from '@/views/subject/todoSubject'
import todoCollection from '@/views/fileTask/todoCollection'
import TodoConnection from "@/views/make/todoConnection";
import todoEndsubject from '@/views/subject/todoEndsubject'
import todoWorkitem from "@/views/pim/todoWorkItem";
import todoReport from '@/views/pim/todoReport'
import TodoAdjust from "../../pim/todoAdjust";

export default {
  components: {
    TodoAdjust,
    schedule,
    check,
    discussion,
    todoReview,
    todoOpinion,
    todoSubject,
    todoCollection,
    TodoConnection,
    todoWorkitem,
    todoEndsubject,
    todoReport
  },
  name: "todo",
  created () {

  },
  data () {
    return {
      activeId: 1,
      scheduleTotal: 0,
      checkTotal: 0,
      discussionTotal: 0,
      reviewTotal: 0,
      opinionTotal: 0,
      subjectTotal: 0,
      collectionTotal: 0,
      connectionTotal: 0,
      endSubjectTotal: 0,
      reportTotal: 0,
      adjustTotal: 0,
      workitemTotal: 0
    };
  },
  filters: {
    // 不显示0
    notZero: function (value) {
      if (value == 0) {
        return ''
      }
      return value
    }
  },
  methods: {
    handleClick () {

    },
    getWorkitemTotal (workitemTotal) {
      this.workitemTotal = workitemTotal
    },
    // 获取待办规划总数
    getScheduleTotal (scheduleTotal) {
      this.scheduleTotal = scheduleTotal
    },
    // 获取待办清单总数
    getCheckTotal (checkTotal) {
      this.checkTotal = checkTotal
    },
    // 获取会商反馈总数
    getDiscussionTotal (discussionTotal) {
      this.discussionTotal = discussionTotal
    },
    getReviewTotal (reviewTotal) {
      this.reviewTotal = reviewTotal
    },
    getOpinionTotal (opinionTotal) {
      this.opinionTotal = opinionTotal
    },
    getSubjectTotal (subjectTotal) {
      this.subjectTotal = subjectTotal
    },
    getCollectionTotal (collectionTotal) {
      this.collectionTotal = collectionTotal
    },
    getConnectionTotal (connectionTotal) {
      this.connectionTotal = connectionTotal
    },
    getEndSubjectTotal (endSubjectTotal) {
      this.endSubjectTotal = endSubjectTotal
    },
    getReportTotal (reportTotal) {
      this.reportTotal = reportTotal
    },
    getAdjustTotal (adjustTotal) {
      this.adjustTotal = adjustTotal
    },
  }
};
</script>


<style lang="scss">
.toDoClass .el-badge__content.is-fixed {
  position: absolute;
  top: 8px;
  right: 10px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}
</style>
<style lang="scss" scoped>
/deep/ .el-table .success-row .is-left .cell {
  text-decoration: underline;
  cursor: pointer;
}

.grid {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.flex-start-div{
  display: flex;
  justify-content: space-between;
}
.flex-start{
  width: 50%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-right: 7px;
}

span {
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  font-size: 20px;
  color: #303133;
  display: block;
  cursor: pointer;
}

/deep/ .el-badge__content.is-fixed {
  top: 8px;
}

.actived {
  background: #409eff;
  color: #fff;
  position: relative;
}

.unactived:hover {
  color: #409eff;
}
/deep/.el-badge {
  vertical-align: baseline;
}
</style>






